<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>群聊管理</title>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.css"/>
    <style type="text/css">
        body, html {
            height: 100%;
            background-color: #f4f4f4;
            -webkit-tap-highlight-color: transparent;
        }

        footer {
            text-align: center;
            font-size: 14px;
            padding: 20px;
        }

        .weui-loadmore_line .weui-loadmore__tips {
            background-color: #f4f4f4;
        }

        footer a {
            color: #999;
            text-decoration: none;
        }

    </style>
</head>

<body ontouchstart="">
<div class="weui-pull-to-refresh__layer">
    <div class='weui-pull-to-refresh__arrow'></div>
    <div class='weui-pull-to-refresh__preloader'></div>
    <div class="down">下拉刷新</div>
    <div class="up">释放刷新</div>
    <div class="refresh">正在刷新</div>
</div>
<div class="defaultGroup">
    <div class="weui-cells__title weui-cell default_group_lists" th:unless="${groupDefaultSize} == 0">
        默认群列表
    </div>
    <div class="weui-cells demos-content-padded default_group_lists" id='default_group_lists'
         th:unless="${groupDefaultSize} == 0">
        <a class="weui-cell weui-cell_access group-info" th:each="group:${groupList}"
           th:attr="id=${group.groupId},group-id=${group.groupId},group-name=${group.groupName}"
           href="javascript:;" url-data="/group/manage">
            <div class="weui-cell__bd"><p th:text="${group.groupName}"></p></div>
            <div class="weui-cell__ft"></div>
        </a>

    </div>
</div>
<div class="weui-cells__title weui-cell ">
    群列表
</div>
<div class="weui-cells" id="group-lists">
</div>
<div class="weui-loadmore weui-loadmore_line loadmore_group">
    <span class="weui-loadmore__tips"></span>
</div>
<input type='hidden' id='init_url' url-data="/group/list"/>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.js"></script>
<!-- <script type="text/javascript" src="<?php echo $host_name;?>/public/js/manage-group-list.js<?php echo $static_version?>"> </script> -->
<script type="text/javascript">

    //页面加载，执行
    $(function () {
        loadGroupList();
    });


    //定义选择器，滚动使用
    $(document.body).infinite().on("infinite", function () {
        loadGroupList()
    });


    function getOsType() {
        var u = navigator.userAgent;
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 || u.indexOf('Windows Phone') > -1) {
            return 'Android';
        } else if (u.indexOf('iPhone') > -1) {
            return 'IOS';
        } else {
            return 'PC';
        }
    }

    function reqUrl(reqUri, params, callbackName) {
        var type = getOsType();
        if (type == 'Android') {
            Android.requestPost(reqUri, params, callbackName);
        } else if (type == 'IOS') {
            ios_requestPost(reqUri, params, callbackName);
        } else {
            $.toast('暂时不支持该设备');
        }
    }

    function reqHtml(reqUri, params) {
        var type = getOsType();
        if (type == 'Android') {
            Android.requestPage(reqUri, params)
        } else if (type == 'IOS') {
            ios_requestPage(reqUri, params);
        } else {
            $.toast('暂时不支持该设备');
        }
    }


    function reqImageUpload(callback) {
        var type = getOsType();
        if (type == 'Android') {
            Android.imageUpload(callback);
        } else if (type == 'IOS') {
            ios_imageUpload(callback);
        } else {
            $.toast('暂时不支持该设备');
        }
    }

    function reqImageDownload(imageid, callback) {
        var type = getOsType();
        if (type == 'Android') {
            Android.imageDownload(imageid, callback);
        } else if (type == 'IOS') {
            ios_imageDownload(imageid, callback);
        } else {
            $.toast('暂时不支持该设备');
        }
    }

    function toast(msg) {
        var type = getOsType();
        if (type == 'Android') {
            Android.showToast(msg);
        } else if (type == 'IOS') {
            $.toast(msg);
        } else {
            $.toast('暂时不支持该设备');
        }
    }

    $(document).on("click", ".group-info", function () {
        var groupId = $(this).attr('group-id');
        var groupName = $(this).attr('group-name');
        console.log(groupId);
        var reqUri = $(this).attr('url-data');
        var params = {
            "group_id": groupId,
            "group_name": groupName,
        };
        reqHtml(reqUri, JSON.stringify(params));
    });


    //定义全局变量
    var page = 0;//
    var loading = false;

    //加载群聊列表
    function loadGroupList() {
        if (loading) {
            $('.loadmore_group').addClass('weui-loadmore_line');
            $('.loadmore_group span').html('到底啦');
            return;
        }
        page = page + 1;
        var reqUri = $('#init_url').attr('url-data');
        var params = {
            "page": page.toString()
        };
        reqUrl(reqUri, JSON.stringify(params), 'addGroupToList');
        loading = true;
    }

    function addGroupToList(results) {
        results = eval("(" + results + ")");
        var data = results.groupData;
        var html = '';
        $.each(data, function (index, group) {
            var html = '<a class="weui-cell weui-cell_access group-info" id="' + group.siteGroupId + '" group-id="' + group.siteGroupId + '"  href="javascript:;" group-name="' + group.groupName + '" url-data="/group/manage"> <div class="weui-cell__bd"> <p>' + group.groupName + '</p> </div> <div class="weui-cell__ft"> </div> </a>';
            $('#group-lists').append(html);
        });
        loading = results.loading;
        if (loading == true) {
            $(".weui-loadmore__tips").html("到底啦");
        } else {
            $(".weui-loadmore__tips").html("加载更多");
        }
    }

    $(document.body).pullToRefresh(function () {
        reqUrl("/group/refresh", null, "doRefresh");
        $('#group-lists').html("");
        page = 0;
        loading = false;
        loadGroupList();
        $(document.body).pullToRefreshDone();

    });

    function doRefresh(results) {
        results = eval("(" + results + ")");
        var size = results.size;
        if (size <= 0) {
            $('.defaultGroup').html("");
        } else {
            $('.defaultGroup').html("");
            var defHtml = '<div class="weui-cells__title weui-cell default_group_lists" th:unless="${groupDefaultSize} == 0">\n' +
                '        默认群列表\n' +
                '    </div>\n' +
                '    <div class="weui-cells demos-content-padded default_group_lists" id=\'default_group_lists\'\n' +
                '         th:unless="${groupDefaultSize} == 0"></div>';
            $('.defaultGroup').append(defHtml);
            var data = results.data;
            var html = '';
            $.each(data, function (index, group) {
                var html = '<a class="weui-cell weui-cell_access group-info" group-id="' + group.siteGroupId + '"  href="javascript:;" group-name="' + group.groupName + '" url-data="/group/manage"> <div class="weui-cell__bd"> <p>' + group.groupName + '</p> </div> <div class="weui-cell__ft"> </div> </a>';
                $('#' + group.siteGroupId).remove();
                $('#default_group_lists').append(html);
            });
        }
    }
</script>
</body>
</html>